<template>
  <div class="password-back">
    <div class="password-view">
      <van-field size="large" label-width="70px" v-model="mobile" center clearable type="tel" placeholder="请输入手机号" label="手机号" />
      <van-field size="large" label-width="70px" center clearable type="number" label="验证码" placeholder="请输入验证码" v-model="code">
        <template #button>
          <van-button size="mini" type="success" :disabled="false" @click="sendCode">发送验证码</van-button>
        </template>
      </van-field>
    </div>
    <div class="password-view">
      <!-- 输入新密码 -->
      <van-field size="large" label-width="70px" type="password" placeholder="6-20位大小写字母+数字组成" :error-message="errPassword" v-model="password" clearable label="新密码" />
      <!-- 再次输入新密码 -->
      <van-field size="large" label-width="70px" type="password" placeholder="请再次输入新密码" :error-message="errNewpassword" v-model="newPassword" clearable label="确认密码" />
    </div>
    <div class="submit-button">
      <van-button size="large" type="success" :loading="loading" loading-text="更新中..." @click="subMit">确定</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from "vue";
import { useRouter } from "vue-router";
const $router = useRouter(); // 这是路由跳转的

const mobile = ref(""); //手机号
const code = ref(""); //验证码
const password = ref(""); //密码
const newPassword = ref(""); //确认密码
/* -------发送验证码-------- */
const codeDisabled = ref(false);
const countdownTime = ref(60); //倒计时时间
const codeName = ref("发送验证码");
const bizId = ref(""); //验证码id
</script>

<style>
.password-back {
  background-color: #f6f7f9;
  height: 100vh;
}
.password-view {
  padding: 20px 10px;
}
.submit-button {
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.password-back {
  --van-button-mini-padding: 14px 8px;
  --van-button-mini-font-size: 14px;
  --van-button-normal-font-size: 15px;
}
.van-cell {
  font-size: 16px;
}
</style>
